<script setup>
import { HeaderLogo, HeaderMenus } from '@/layouts/components'

const searchOnFocus = ref(false) // 搜索框聚焦
</script>

<template>
  <AppCard
    class="flex px-12"
    border-b="1px solid light_border dark:dark_border"
  >
    <div class="f-c-c flex-1">
      <HeaderLogo class="m-r-20" />
      <HeaderMenus class="max-w-260 flex-1" />
    </div>
    <div class="f-c-c flex-1">
      <Search v-model:search-on-focus="searchOnFocus" class="mx-15" />
      <ToggleTheme class="mobile-hidden mr-20" />
      <!-- 创作者中心 -->
      <router-link
        :to="{ path: '/creator/home', query: { title: '创作者中心' } }"
        class="mobile-hidden mr-10"
      >
        <el-button type="primary">
          创作者中心
        </el-button>
      </router-link>
      <Avatar />
    </div>
  </AppCard>
</template>

<style scoped>
@media (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
}
</style>
